<template>
  <view class="container">
    <uni-list>
      <view class="avatar-wrap align-center justify-center flex">
        <!-- <u--image :showLoading="true" :src="user.avatar" shape="circle" width="100px" height="100px"></u--image> -->
        <!-- <image style="width: 100px; height: 100px; border-radius: 50%;" :src="user.avatar"></image> -->
        <u--image :showLoading="true" :src="user.avatar" width="100px" height="100px" mode="widthFix" shape="circle">
          <view slot="error" style="font-size: 24rpx;">加载失败</view>
        </u--image>
      </view>
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="用户名" :rightText="user.userName" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
      <!-- #ifdef H5 -->
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码"
        :rightText="user.phonenumber" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
      <!-- #endif -->
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位"
        :rightText="user.deptName + '/' + postGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期"
        :rightText="user.createTime" />
    </uni-list>
  </view>
</template>

<script>
  import {
    getUserProfile
  } from "@/api/system/user"

  export default {
    data() {
      return {
        user: {},
        roleGroup: "",
        postGroup: ""
      }
    },
    onLoad() {
      this.getUser()
    },
    methods: {
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data.user
          this.postGroup = response.data.postGroup

          var groups = response.data.roles
          this.roleGroup = groups.toString()
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .avatar-wrap {
    margin: 10px 20px;
  }
</style>
